<template>
  <div style="max-height: 50vh;overflow: auto">
    <el-form label-width="80px" :model="returnsForm" :rules="returnsRules" ref="returnsRef">
      <div style="display: flex;">
        <!--<el-form-item label="退货仓库" prop="shopName">-->
          <!--<el-select v-model="returnsForm.shopName" filterable placeholder="请选择" @change="selectShop">-->
            <!--<el-option-->
              <!--v-for="item in shopList"-->
              <!--:key="item.id"-->
              <!--:label="item.name"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="退货日期" style="margin-left: 50px;" prop="orderDate">-->
            <!--<el-date-picker-->
              <!--value-format="yyyy-MM-dd"-->
              <!--v-model="returnsForm.orderDate"-->
              <!--align="right"-->
              <!--type="date"-->
              <!--placeholder="选择日期"-->
              <!--:picker-options="pickerOptions"-->
            <!--/>-->
          <!--</el-form-item>-->
        <!--</div>-->
        <!-- <el-form-item label="退货地址">
          <div style="display: flex; flex-direction: column;">
            <span>{{ returnsForm.order.consignee }} {{ returnsForm.order.phone }}</span>
            <span>{{ returnsForm.order.areaName }} {{ returnsForm.order.address }}</span>
          </div>
        </el-form-item> -->
      </div>
      <div class="product_header_name">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
      </div>
      <el-table
        :data="returnsData.itemList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="spec"
          label="规格">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="订单数量">
        </el-table-column>
        <el-table-column
          prop="availableReturnQuantity"
          label="可退数量">
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="returnQuantity"
          label="实退数量">
          <template slot-scope="scope">
            <el-input type="number" @input="numberInput($event,scope.$index)" v-model="scope.row.returnQuantity"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <office-dialog ref="officeDialog" @confirm="dialogConfirm"/>
  </div>
</template>
<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../../utils/utils'
  import OfficeDialog from '@/components/OfficeDialog'
  import {list as sysEmployeeList} from '@/api/sysEmployee'
  import {list as shopList} from '@/api/shop'
  import {returns, returnsAndAudit} from '@/api/order'
  import { received } from '@/api/askfor'
  export default {
    data() {
      return {
        returnsData: {
          memberId: '',
          address: '',
          itemList: [],
          officeId:'',
          operatorId:''
        },
        shopId:'',
        shopName:'',
        officeName:'',
        operatorName: '',
        memberName:'',
        sysEmployeeList: [],
        shopList: [],
        orderDate: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        returnsRules: {
          shopName: [
            { required: true, message: '请选择仓库', trigger: 'blur' },
          ],
          orderDate: [
            { required: true, message: '请选择日期', trigger: 'blur' },
          ]
        }
      }
    },
    components:{
      OfficeDialog
    },
    props: ['returnsForm'],
    created() {
      if (!utils.isNull(this.returnsForm)){
        console.log(this.returnsForm)
        this.memberName = this.returnsForm.memberName;
        this.returnsData.address = this.returnsForm.order.areaName + this.returnsForm.order.address;
        this.returnsData.itemList = this.returnsForm.order.itemList;
        this.returnsData.memberId = this.returnsForm.order.memberId;
        this.returnsData.officeId = this.returnsForm.order.officeId;
        this.returnsData.operatorId = this.returnsForm.order.operatorId;
        this.officeName = this.returnsForm.officeName;
        this.operatorName = this.returnsForm.operatorName;
        this.returnsData.itemList.forEach(item => { // 初始化退货数量
          item.returnQuantity = item.availableReturnQuantity
        })
        this.shopName = '';
        this.shopId = '';
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1 + ''
        let day = date.getDate() + ''
        // this.returnsForm.shopName = ''
        this.$set(this.returnsForm, 'orderDate', `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`)
        // this.returnsForm.orderDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      }
      this.loadShop();
      //this.loadSysEmployee()
    },
    methods: {
      numberInput (value, index) { // 限制最大退货数量跟最小退货数量
        if (value > this.returnsData.itemList[index].availableReturnQuantity) {
          this.returnsData.itemList[index].returnQuantity = this.returnsData.itemList[index].availableReturnQuantity
        }
      },
      //  销售公司
      dialogShow() {
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      dialogConfirm(val) {
        this.returnsData.officeId = val.id;
        this.officeName = val.name
      },
      selectSysEmployee(data) {
        this.returnsData.operatorId = data
      },
      selectShop(data) {
        this.shopId = data
      },
      //  业务员
      loadSysEmployee() {
        var _this = this
        let params = new URLSearchParams();
        sysEmployeeList(params).then(response => {
          console.log(response);
          _this.sysEmployeeList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      //  退货仓库
      loadShop() {
        var _this = this
        let params = new URLSearchParams();
        shopList(params).then(response => {
          console.log(response);
          _this.shopList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      returnsClick(){
        var adopt = 0 // 用于判断退货量是否小于0
        this.returnsData.itemList.forEach(item => {
          if (item.returnQuantity > 0) {
            adopt = adopt + item.returnQuantity
          }
        })
        console.log(adopt)
        this.$refs.returnsRef.validate((valid) => {
          if (adopt==0) {
            return this.$message({message: '请输入退货数量',type: 'warning'})
          }
          if (valid) {
            var _this = this
            let params = new URLSearchParams();
            //params.append('shopId', _this.shopId);
            //params.append('orderDate', _this.returnsForm.orderDate);
            console.log(_this.shopId, _this.returnsForm.orderDate)
            returns(_this.returnsForm.order.id,params,_this.returnsData.itemList).then(response => {
              console.log(response);
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              _this.$emit('findClick')
              _this.$emit('returnsClose')
              EventBus.$emit('order-view', response.data)
            }).catch(error => {
              console.log('error!!')
            });
          } else {
          }
        })
      },
      aReturnsClick(){
        var adopt = 0 // 用于判断退货量是否小于0
        this.returnsData.itemList.forEach(item => {
          if (item.returnQuantity > 0) {
            adopt = adopt + item.returnQuantity
          }
        })
        this.$refs.returnsRef.validate((valid) => {
          if (adopt==0) {
            return this.$message({message: '请输入退货数量',type: 'warning'})
          }
          if (valid) {
            var _this = this
            let params = new URLSearchParams();
            params.append('shopId', 1);
            params.append('orderDate', _this.returnsForm.orderDate);
            // _this.returnsData.itemList.forEach(function (item) {
            //   item.returnQuantity = item.availableReturnQuantity
            // })
            returnsAndAudit(_this.returnsForm.order.id, _this.returnsData.itemList, params).then(response => {
              console.log(response);
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              _this.$emit('findClick');
              _this.$emit('returnsClose')
              EventBus.$emit('order-view', response.data)
            }).catch(error => {
              console.log('error!!')
            });
          }
        })
      }
    }
  }
</script>

<style scoped>
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
  }
</style>
